<!-- 订单异步回调查询 -->
<template>
    <div>
        <a-page-header
            style="border: 1px solid rgb(235, 237, 240);background:#fff"
            :title="'充值账号'+phone+'的订单回调查询'"
            @back="() => $router.go(-1)"
        >
            <div class="table-page-search-wrapper">
                <!-- <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="购买时间">
                                <a-date-picker v-model="date" :valueFormat="'YYYY-MM-DD'" @change="getData" allowClear/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="团队关系">
                                <a-select v-model="isDirect" show-search placeholder="请选择团队关系" allowClear @change="getData">
                                    <a-select-option v-for="(item,i) in isDirectList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item >
                                <a-button type="primary" @click="getData()">查询</a-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form> -->
            </div>
            <a-table rowKey="id" :loading="isload" :columns="columns" bordered @change="handleTableChange" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}" :data-source="dataList" size="small" :scroll="{ x: 1200, }">
                <div slot="realAmount" slot-scope="realAmount">
                    <div>{{realAmount}}元</div>
                </div>
                <div slot="activeDay" slot-scope="activeDay">
                    <div>{{activeDay}}天</div>
                </div>
                <template slot="payType" slot-scope="text, record">
                    <a-tag color="pink" v-if="record.payType==1" >余额支付</a-tag>  
                    <a-tag color="orange" v-else-if="record.payType==2" >支付宝支付</a-tag>  
                    <a-tag color="cyan" v-else-if="record.payType==3" >手动添加</a-tag>  
                </template>
                <div slot="operation" slot-scope="text,record">
                    <a-popconfirm
                        title="是否补发当前异步回调?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="orderPromise(record)"
                    >
                        <a-button type="link">补发</a-button>
                    </a-popconfirm>
                </div>
            </a-table>
        </a-page-header>
    </div>
</template>

<script>
import { sendExternalReleaseOrderNotify , queryExternalReleaseOrderNotify } from '@/api/order';
import { columns } from './table';
import moment from 'moment';
export default {
    data () {
        return {
            phone:this.$route.query.phone,
            orderCode:this.$route.query.orderCode,
            merchantNo:this.$route.query.merchantNo,
            dataList: [],
            total: 0,
            isload: false,
            page: 1,
            size: 10,
            columns,
        };
    },
    created(){
        this.getData()
    },
    methods: {
        getData(){
            let _this = this
            _this.isload = true;
            const params = {
                'orderCode': _this.orderCode,
                'merchantNo': _this.merchantNo,
                'page': _this.page - 1,
                'size': _this.size,
            }
            queryExternalReleaseOrderNotify(params)
            .then(res=>{
                _this.isload = false;
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 补发
        orderPromise(item){
            let _this = this
            const params = {
                'orderCode': item.orderCode
            }
            sendExternalReleaseOrderNotify(params)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '补发成功',
                        duration: 8,
                    })
                    _this.getData()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        }
    }
}

</script>
<style scoped>

</style>